<template>
  <div class="setContainer" :style="{ display: isClose ? 'none' : 'block' }">
    <div class="headerBox">
      <h5>系统配置参数</h5>
      <i
        class="el-icon-arrow-down h-icon h-row"
        :style="{ transform: isMerged ? 'rotate(180deg)' : 'rotate(0)' }"
        @click="mergeTable"
      ></i>
      <i class="el-icon-close h-icon h-close" @click="closeAll"></i>
    </div>
    <div
      class="tableContainer"
      :style="[
        { opacity: isMerged ? '0' : '1' },
        { height: isMerged ? '0' : '840px' },
        { marginTop: isMerged ? '0' : '15px' },
      ]"
    >
      <el-form
        :label-position="labelPosition"
        label-width="150px"
        :rules="rules"
        :model="formLabelAlign"
        ref="ruleForm"
      >
        <el-form-item label="系统名称" prop="sName">
          <el-input v-model="formLabelAlign.sName"></el-input>
        </el-form-item>
        <el-form-item label="网址" prop="sUrl">
          <el-input v-model="formLabelAlign.sUrl"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="sCompany">
          <el-input v-model="formLabelAlign.sCompany"></el-input>
        </el-form-item>
        <el-form-item label="企业简介" prop="sInfo">
          <el-input v-model="formLabelAlign.sInfo"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="sPhone">
          <el-input v-model="formLabelAlign.sPhone"></el-input>
        </el-form-item>
        <el-form-item label="验证码开关">
          <el-radio v-model="formLabelAlign.sSwitch" label="0">开启</el-radio>
          <el-radio v-model="formLabelAlign.sSwitch" label="1">关闭</el-radio>
        </el-form-item>
        <el-form-item label="登录超时(分钟)">
          <el-input-number
            v-model="formLabelAlign.sTime"
            controls-position="right"
            :min="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="登错次数锁定">
          <el-input-number
            v-model="formLabelAlign.sWrong"
            controls-position="right"
            :min="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="站点LOGO" style="width: 80%">
          <div class="block">
            <el-image style="width: 300px; height: 100px" :src="url">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <template class="uploadBlock">
            <el-upload
              class="upload-demo"
              action="https://132.232.110.185/personnelManagement/file/imgUploadFile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </template>
        </el-form-item>
        <el-form-item class="form-bottom">
          <el-button class="form-btn" @click="submitForm('formLabelAlign')"
            >保存配置</el-button
          >
          <el-button @click="resetForm('formLabelAlign')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Settings",
  data() {
    return {
      isClose: false,
      isMerged: false,
      labelPosition: "right",
      radio: "1",
      num1: 100,
      num2: 100,
      url: "http://hrv4.bdrmkj.com/Uploads/Logo/20190326/5c9a2c72d786b.png",
      formLabelAlign: {},
      rules: {
        name: [
          { required: true, message: "请输入系统名称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        webSite: [{ required: true, message: "请选输入网址", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        introduction: [
          { required: true, message: "请写企业简介", trigger: "blur" },
        ],
        tel: [
          {
            type: "number",
            required: true,
            message: "请输入联系电话",
            trigger: "blur",
          },
        ],
      },
      fileList: [],
    };
  },
  methods: {
    //请求数据
    async getAllData() {
      let { data: res } = await this.$axios.post("/system/showSystem");
      this.formLabelAlign = res;
      console.log(res);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //提交表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //判断更换收缩图标
    changeStatus() {
      this.isMerged = !this.isMerged;
    },
    //收缩表格
    mergeTable() {
      this.changeStatus();
    },
    //关闭
    closeAll() {
      this.isClose = !this.isClose;
    },
  },
  mounted() {
    this.getAllData();
  },
};
</script>

<style scoped>
.setContainer {
  width: 98%;
  height: 100%;
  margin: 20px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  transition: all 0.5s linear;
}

.h-icon {
  position: absolute;
  color: #cfd1d2;
  font-weight: bold;
}

.h-row {
  right: 55px;
  transition: all 0.3s linear;
}

.h-close {
  right: 25px;
}

.el-upload__tip {
  float: right;
}

.form-bottom {
  padding: 20px 0;
  border-top: 1px dashed #beb8b8;
}

.form-btn {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #fff;
}
</style>